<template>
  <div class="container">
    <div class="user_list">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="search">
          <a-form-item label="创建日期">
            <a-range-picker
              v-model="queryParam.time"
              :ranges="{
              '1周': [moment().startOf('day').subtract(1, 'weeks'), moment()],
              半个月: [moment().startOf('day').subtract(14, 'days'), moment()],
              '3个月': [moment().startOf('day').subtract(3, 'months'), moment()],
              '6个月': [moment().startOf('day').subtract(6, 'months'), moment()],
              '1年': [moment().startOf('day').subtract(1, 'years'), moment()],
            }"
              format="YYYY-MM-DD"
              @change="onChangeData"
              :disabled-date="disabled"
            />
          </a-form-item>
          <a-form-item label="用户ID">
            <a-input v-model="queryParam.userNo" placeholder="用户ID" />
          </a-form-item>
          <a-form-item label="登录名">
            <a-input v-model="queryParam.userPhone" placeholder="登录名" />
          </a-form-item>
          <a-form-item label="订单状态">
            <a-select v-model="queryParam.orderState" placeholder="请选择订单状态" style="width: 200px">
              <a-select-option :value="item.key" v-for="item in option" @onchange="onchange(item)">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" htmlType="submit" @click="search">查询</a-button>
            <a-button htmlType="submit" class="ml15" @click="searchReset">重置</a-button>
          </a-form-item>
        </a-form>
      </div>
      <s-table
        ref="table"
        size="default"
        :columns="columns"
        :data="loadData"
        bordered
        :rowKey="(record) => record.id"
      >
        <template slot="orderState" slot-scope="text, record">
          <a-tag color="orange" v-if="text === 1">充值中</a-tag>
          <a-tag color="green" v-if="text === 2">成功</a-tag>
          <a-tag color="red" v-if="text === 3">失败</a-tag>
        </template>
      </s-table>
    </div>
  </div>
</template>

<script>
import STable from '@/components/Table'
import { rechargeOrderList } from '@/api/order-management'
import { mapGetters } from 'vuex'
import moment from 'moment'
import { common } from '@/common/index'

export default {
  name: 'rechargeOrders',
  components: {
    STable
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  data() {
    return {
      form: this.$form.createForm(this),
      option: [
        { label: '充值中', value: 1, key: 1 },
        { label: '成功', value: 2, key: 2 },
        { label: '失败', value: 3, key: 3 }
      ],
      columns: [
        {
          title: '创建时间',
          dataIndex: 'createTime',
          align: 'center'
        },
        {
          title: '订单号',
          dataIndex: 'orderNumber',
          align: 'center'
        },
        {
          title: '充值金额',
          dataIndex: 'amount',
          customRender: (text) => this.common.numFormat(text),
          align: 'center'
        },
        {
          title: '用户ID',
          dataIndex: 'userNo',
          align: 'center'
        },
        {
          title: '登录名',
          dataIndex: 'userPhone',
          align: 'center'
        },
        {
          title: '订单状态',
          dataIndex: 'orderState',
          slots: { title: 'orderState' },
          scopedSlots: { customRender: 'orderState' },
          align: 'center'
        },
        {
          title: '三方订单号',
          dataIndex: 'ticket',
          align: 'center'
        }
      ],
      // 查询条件参数
      queryParam: { time: [null, null], userNo: '', userPhone: '', orderState: '' },
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        const { userId } = this.userInfo
        this.queryParam.orderState = this.queryParam.orderState !== '' ? +this.queryParam.orderState : ''
        let params = {
          ...parameter,
          userId,
          ...this.queryParam,
          startTime: this.queryParam.time[0] ? `${this.queryParam.time[0]} 00:00:00` : '',
          endTime: this.queryParam.time[1] ? `${this.queryParam.time[1]} 23:59:59` : ''
        }
        delete params.time
        return new Promise((resolve, reject) => {
          rechargeOrderList(params)
            .then((res) => {
              if (res.code === 200) {
                resolve(res.data)
              } else {
                this.$message.error(res?.msg)
              }
            })
            .catch((err) => {
              reject(err)
            })
            .finally(() => {
            })
        })
      }
    }
  },

  methods: {
    moment,
    onChangeData(dates, dateStrings) {
      this.queryParam.time = dateStrings
    },
    disabled(current) {
      return current && current > moment().subtract().endOf('day')
    },
    refresh(isBackToFirstPage = false) {
      this.$refs.table.refresh(isBackToFirstPage)
    },
    onchange(data) {
      this.queryParam.orderState = data.key
    },
    search() {
      this.refresh(false)
    },
    searchReset() {
      this.queryParam = { time: [null, null], userNo: '', userPhone: '', orderState: '' }
      this.refresh(true)
    }
  }
}
</script>
<style lang="less" scoped>
.user_list {
  .form {
    display: flex;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }
}

.red {
  color: #d9001b;
}

.orange {
  color: #f59a23;
}

.green {
  color: #63a103;
}
</style>
